<template>
	<view class="page">
		<u-navbar title="视频合成" border @leftClick="$utils.back()" placeholder />
		<view class="contentBox">
			<scroll-view :scroll-y="true" style="height: 100%;">
				<view style="margin-top: 20rpx;">
					<u--textarea maxlength='999' v-model="title" placeholder="请输入动态介绍" :disabled="disabled"
						autoHeight></u--textarea>
				</view>
				<view v-for="(item,index) in VideoTracks" :key="index" style="margin-top: 20rpx;">
					<view>
						视频轨道({{index+1}})
					</view>
					<view class="selectBox" v-if="item.image.length">
						<view class="flex">
							<u-icon name='photo' size='24rpx' label='请选择替换图片' labelSize='24rpx' />
						</view>
						<view>
							<view v-for="(image,imagendex) in item.image" :key='iamgeIndex'
								@click="clickImage(image.url,item.image)">
								<view @click.stop="openPopup('image',index,imagendex)" class="changeBox">
									<view class="icon-ln_xianghujiaohuan iconfont" />
								</view>
								<image :src="image.url" mode="aspectFill" />
							</view>
						</view>
					</view>
					<view class="selectBox" v-if="item.video.length">
						<view class="flex">
							<u-icon name='play-circle' size='24rpx' label='请选择替换视频' labelSize='24rpx' />
						</view>
						<view>
							<view v-for="(video,videoIndex) in item.video" :key='videoIndex'>
								<view @click.stop="openPopup('video',index,videoIndex)" class="changeBox">
									<view class="icon-ln_xianghujiaohuan iconfont" />
								</view>
								<video v-if="video.url" :src="video.url" controls :poster="video.thumb"
									object-fit='cover' />
								<view class="videoItem" v-else>
									第{{videoIndex+1}}个视频
								</view>
							</view>
						</view>
					</view>
				</view>
			
			</scroll-view>
		</view>

		<u-button color='#3975c6' shape='circle' @click='pulish' :disabled="disabled">
			立即生成
		</u-button>
		<view >
			<u-popup :show="show" :round="10" @close="show=null">
				<view class="popupTitle">
					<u-icon name='close' color='#fff' />
					<view>
						选择{{show=='video'?'视频':'图片'}}
					</view>
					<u-icon name='close' @click='show=null' />
				</view>
				<view class="stepsBox">
					<Steps :propsShow='true' :loading='loading' :processes='processes' :setpIndex='setpIndex'
						@clickStep='clickStep' />
				</view>
				<view style="height: 60vh;padding: 0 40rpx;">
					<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="activities" @query="query"
						:default-page-no="1" :default-page-size="10" :auto="false">
						<active :type='show' @selectChange='selectChange' :loading='loading'
							:prorcessesId='prorcessesId' :activities='activities' />
					</z-paging>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import Steps from '@/components_company/steps.vue'
	import active from './components/active.vue'
	export default {
		components: {
			Steps,
			active
		},
		data() {
			return {
				title: null,
				decorate_id: 0,
				loading: true,
				processes: [],
				setpIndex: 0,
				activities: [],
				project: null,
				project_id: null,
				VideoTracks: [],
				show: null,
				pIndex: 0,
				cIndex: 0,
				disabled: false,
				process_id: 0,
				customer_id: 0
			}
		},
		computed: {
			prorcessesId() {
				if (!this.processes.length) return 0
				return this.processes[this.setpIndex].id
			},
		},
		watch: {
			show() {
				if (this.show) {
					this.$refs.paging.reload()
				}
			}
		},
		onLoad(op) {
			this.decorate_id = op.decorate_id
			this.project_id = op.id
			this.customer_id = op.customer_id
			this.process_id = op.process_id
			this.getSteps()
			this.$api_company.Compound.Project.Detail({
				project_id: op.id
			}).then(res => {
				this.project = res.data.project
				this.VideoTracks = this.project.VideoTracks.filter(item => {
					if (item.Type == 'Video') return true
					return false
				})
				this.VideoTracks = this.VideoTracks.map(item => {
					let video = [],
						image = []
					item.VideoTrackClips.forEach(item2 => {
						if (item2.Type == 'Video') {
							video.push({
								...item2,
								url: item2.Src
							})
						} else if (item2.Type == 'Image') {
							image.push({
								...item2,
								url: item2.Src
							})
						}
					})
					return {
						...item,
						video,
						image
					}
				})
			})
		},
		methods: {
			openPopup(type,pIndex,cIndex){
				if(this.disabled)return
				this.show=type
				this.pIndex=pIndex
				this.cIndex=cIndex
			},
			pulish() {
				if (!this.title) {
					uni.$u.toast('请输入内容')
					return
				}
				if (this.title.length < 6) {
					uni.$u.toast('内容长度不能小于6个字符')
					return
				}
			
				this.disabled = true
				this.$api_company.Compound.Create({
					project_id: this.project_id,
					timeline: this.project
				}).then(res => {
					this.videoStore(res.data.data.media_id)
				}).catch(err => {
					uni.$u.toast(err.message)
					this.disabled = false
				})
			},
			videoStore(id) {
				this.$api_company.Video.Add({
					title: '微信视频',
					company_id: 1,
					aliyun_video_id: id,
					duration: 100
				}).then(res => {
					this.activeAdd(res.data.video.id, res.data.video.aliyun_video_id)
				}).catch(err => {
					uni.$u.toast(err.message)
					this.disabled = false
				})
			},
			activeAdd(id, aliyun_video_id) {
				let obj = {
					decorate_id: ~~this.decorate_id,
					customer_id: ~~this.customer_id,
					is_recommend: 1,
					process_id: this.process_id,
					images: [],
					video_ids: [id],
					aliyun_video_id: aliyun_video_id,
					title: this.title
				}
				this.$api_company.Active.Add(obj).then(res => {
					this.disabled = false
					uni.reLaunch({
						url: '/customer_company/detail?id=' + this.decorate_id
					})
				}).catch(err => {
					uni.$u.toast(err.message)
					this.disabled = false
				})
			},
			clickImage(item, images) {
				uni.previewImage({
					urls: images.map(item => item.url),
					current: item
				});
			},
			selectChange(e) {
				console.log(this.pIndex,this.cIndex)
				let pId=0,cId=0
				if (this.show == 'image') {
					this.VideoTracks[this.pIndex].image[this.cIndex] = {
						...this.VideoTracks[this.pIndex].image[this.cIndex],
						Src: e.url,
						url: e.url,
						MediaId: e.media_id
					}
					cId=this.VideoTracks[this.pIndex].image[this.cIndex].Id
					pId=this.VideoTracks[this.pIndex].Id
				} else {
					this.VideoTracks[this.pIndex].video[this.cIndex] = {
						...this.VideoTracks[this.pIndex].video[this.cIndex],
						Src: e.url,
						url: e.url,
						MediaId: e.aliyun_video_id,
						thumb: e.thumb
					}
					cId=this.VideoTracks[this.pIndex].video[this.cIndex].Id
					pId=this.VideoTracks[this.pIndex].Id
				}
				this.project.VideoTracks.forEach(item=>{
					if(item.Id==pId){
						console.log(item.VideoTrackClips)
						item.VideoTrackClips.forEach(item2=>{
							if(item2.Id==cId){
								console.log(item2.MediaId)
								if (this.show == 'image') {
									item2.MediaId=this.VideoTracks[this.pIndex].image[this.cIndex].MediaId
								} else {
									item2.MediaId=this.VideoTracks[this.pIndex].video[this.cIndex].MediaId
								}
								console.log(item2.MediaId)
							}
						})
					}
				})
				console.log(this.project)
				this.VideoTracks=this.VideoTracks.map(item=>item)
			},
			getSteps(id) {
				uni.hideLoading({
					title: '加载中...'
				})
				this.$api_company.Decorate.Detail(this.decorate_id).then(res => {
					this.processes = res.data.decorate.processes
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.message)
				})
			},
			query(page, size) {
				this.loading = true
				console.log(this.prorcessesId)
				let obj = {
					page,
					size,
					process_id: this.prorcessesId,
					media_type: this.show
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api_company.Active.List(this.decorate_id, obj).then(res => {
					this.$refs.paging.complete(res.data.activities.data)
					uni.hideLoading()
					this.loading = false
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.message)
				})
			},
			clickStep(e) {
				this.setpIndex = e
				this.$refs.paging.reload()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.stepsBox {
		height: 100rpx;
		margin: 20rpx 0;
		padding: 0 40rpx;
	}

	.contentBox {
		flex: 1;
		overflow: hidden;
	}

	.but {
		padding: 5rpx 20rpx;
		border-radius: 100rpx;
		background-color: #3975c6;
		color: #fff;
	}


	.selectBox {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f1f1f1;

		>view:nth-child(2) {

			display: flex;
			overflow: auto;
			height: 250rpx;
			align-items: center;

			>view {

				min-width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				position: relative;
			}
		}

		image,
		video {
			width: 100%;
			height: 100%;
		}
	}

	.changeBox {
		z-index: 1;
		top: -14rpx;
		right: -14rpx;
		position: absolute;
		border-radius: 100%;
		border: 1rpx solid #000;
	}

	.flex {
		justify-content: space-between;
		align-items: center;
		display: flex;
	}

	::v-deep .u-border {
		border-color: #fff !important;
	}

	::v-deep .u-textarea {
		padding: 0 !important;
	}

	.icon-ln_xianghujiaohuan {
		font-size: 28rpx;
		transform: rotate(90deg);
	}

	.videoItem {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.4);
		border-left: 1rpx solid rgba(255, 255, 255, 0.4);
		background: linear-gradient(to top right, rgba(90, 149, 207, 0.5), rgba(58, 76, 99, 0.8));
		-webkit-backdrop-filter: blur(6rpx);
		backdrop-filter: blur(6rpx);
		border-radius: 20rpx;
		width: 100%;
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;

	}
</style>